<template>
  <!-- 推荐上架 -->
  <div id="ShelfRecommended">
    <root name="ShelfRecommended">
      <SafeHeader
        v-bind="{
          title: '推荐上架',
          isBack: true,
          fixedTop: true,
        }"
      />
      <v-tabs fixed-tabs height="40" v-model="tab">
        <v-tab class="wms-tab"> 任务 </v-tab>
        <v-tab class="wms-tab"> 上架 </v-tab>
        <!-- 任务页面 -->
        <v-tab-item class="task" transition="slide-y-transition">
          <v-container class="task_list white mt-2">
            <v-row>
              <v-col cols="8" >
                  <v-text-field clearable placeholder="按物料编码查询" style="height: 50px" v-model="serchData.itemCode">
                  </v-text-field>
              </v-col>
              <v-col cols="4">
                  <v-btn small dark depressed color="primary" @click="getUpperTaskData" style="min-width: 100px; height: 45px">查询</v-btn>
              </v-col>
            </v-row>
            <div v-if="upperTaskList[0]">
              <v-container v-for="(item, index) in upperTaskList" :key="index">
                <v-row>
                  <v-col cols="12" class="pa-0 pb-2">
                    <v-card outlined style="background-color: #f2f3f5">
                      <v-card-subtitle class="list_content">
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="3" class="py-1 card-lable"
                            >物料编码</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.itemCode
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="3" class="py-1 card-lable"
                            >物料名称</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.itemName
                          }}</v-col>
                        </v-row>

                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="3" class="py-1 card-lable">
                            数量
                          </v-col>
                          <v-col class="py-1 card-value"
                            >{{ item.quantity }} </v-col
                          >
                        </v-row>

                        <!-- <v-divider></v-divider> -->

                        <v-row align="center">
                          <v-col
                            cols="12"
                            class="
                              py-0
                              mt-2
                              d-flex
                              align-center
                              justify-center
                              font-weight-bold
                            "
                          >
                            <v-btn
                              rounded
                              small
                              color="#193690"
                              dark
                              @click="upper(item)"
                              class="font-weight-bold"
                              style="min-width: 150px; height: 30px"
                              >上架</v-btn
                            >
                          </v-col>
                        </v-row>
                      </v-card-subtitle>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </div>

            <v-row v-else>
              <v-col cols="12" class="text-center">暂无未完成的波次</v-col>
            </v-row>
          </v-container>
        </v-tab-item>
        <!-- 拣货页面 -->
        <v-tab-item transition="slide-y-transition" class="pickingWrap">
          <v-container class="px-2">
          <v-card outlined class="py-3">
            <v-row class="ma-0">  
              <v-col cols="12" class="py-1">
                <v-text-field
                  label="物料"
                  class="my-0 inputPlaceholder"
                  clearable
                  v-model.trim="currentUpperItem.itemCode"
                  hide-details
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0">  
              <v-col cols="12" class="py-1">
                <v-text-field
                  label="批次"
                  class="my-0"
                  clearable
                  v-model.trim="currentUpperItem.batchName"
                  hide-details
                ></v-text-field>
              </v-col>
            </v-row>
            
            <v-row class="ma-0 mt-2">
              <v-col cols="12" class="py-1">
                <v-text-field
                  id="upperQty"
                  label="上架数量"
                  outlined
                  class="inputPlaceholder"
                  clearable
                  v-model="currentUpperItem.batchName"
                  hide-details
                  placeholder="请扫描或者输入目标库位"
                ></v-text-field>
              </v-col>
            </v-row>

            <v-row class="ma-0 mt-2">
              <v-col cols="12" class="py-1">
                <v-text-field
                  id="targetWorkCellCode"
                  label="目标库位"
                  outlined
                  class="inputPlaceholder"
                  @keydown.13="scanCellCode"
                  @change="handleCellChange"
                  clearable
                  v-model="targetWorkCellCode"
                  hide-details
                  placeholder="请扫描或者输入目标库位"
                ></v-text-field>
              </v-col>
            </v-row>
             
          </v-card>
        </v-container>
            
        </v-tab-item>
      </v-tabs>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
// import Message from "@/components/message_box_wms/index";
// import Storage from "@/utils/storage.js";
import wms from "@/utils/business_wms";

// import { apiList } from "@/static/apiList";
function debounce(fn, delay) {
  let timer = null;
  return function () {
    // eslint-disable-next-line prefer-rest-params
    let arg = arguments;

    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, arg);
    }, delay);
  };
}

export default {
  name: "ShelfRecommended",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      deptId: '',
      supplierId: '',
      isSupplier: false,
      hidshow: true,
      overlay: false,
      loading: false,
      supplierList: [],
      headers: [
        {
          text: "库位",
          value: "cellCode",
          align: "center",
          class: "shelfRecommended_table_header",
        },
        {
          text: "容器数量",
          align: "center",
          value: "boxNum",
          class: "shelfRecommended_table_header",
        },
      ],
      tableData1: [],
      deptList: [],
      workCellList: [
        // {
        //   id: "1",
        //   cellCode: "TL_CCQ1-02-01-01",
        //   cellName: "TL_CCQ1-02-01-01",
        // },
        // {
        //   id: "2",
        //   cellCode: "TL_CCQ1-02-01-02",
        //   cellName: "TL_CCQ1-02-01-02",
        // },
      ],
      ctCode: "", // 扫描框容器编码
      targetWorkCellCode: "", // 扫描库位编码
      // billNo: "", // 单据编码
      timer: null,
      vm: this,
      active: [],

      serchData:{
        wareId: localStorage.getItem("wareId"),
        itemCode:"",
      },
      upperTaskList: [],
      currentUpperItem: {}
    };
  },
  watch: {
    ctCode: function (val) {
      this.supplierId = '';
      this.isSupplier = false;
      wms
        .get({
          url: "/transfer/packwork/findByCode",
          data: { code: val },
        })
        .then((res) => {
          if (res.status === 200 && res.data.code === 200) {
            if (res.data.data.asnType === 10 ||
                res.data.data.asnType === 29
            ) {
              this.isSupplier = true;
              this.supplierId = res.data.data.supplierId

            }
            console.log(res, "res");
            console.log(this.supplierId, "this.supplierId")
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
      console.log(val)
    }
  },
  mounted() {    
    this.getUpperTaskData();
  },
  methods: {
    getUpperTaskData() {
      this.overlay = true;
      wms
        .get({
          url: "/inventorys/CellUseTypeList",
          data: this.serchData,
        })
        .then((res) => {
          this.overlay = false;
          if (res.status == 200 && res.data.code == 200) {
            console.log(res)
            this.upperTaskList = res.data.data.list;
          } else {
            this.overlay = false;
            // alert(res.data.message);
          }
        });
    },
    //获取部门
    initDept() {
      wms
        .get({
          url: "/depts/treeDept/0",
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            console.log(res)
            this.deptList = res.data.data;
            console.log(this.deptList, "this.deptList")
          } else {
            this.overlay = false;
            // alert(res.data.message);
          }
        });
    },


    //获取供应商
    initSupplier() {
      wms
        .get({
          url: "/supplier/manages/allList",
          
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {

             this.supplierList = res.data.data;
            console.log(this.supplierList)
          } else {
            this.overlay = false;
          }
        });

    },

    upper(item) {
      //Tab跳转
      this.tab = 1;
      //待拣的物料详情
      this.currentUpperItem = item;
    },


    //提交方法
    acc() {
      console.log(this.active[0], "this.active")
      console.log(this.supplierId, "this.active")
      //校验
      if (!this.ctCode || !this.targetWorkCellCode) {
        window.api.toast({
          msg: "请先完善数据!",
          location: "middle",
          duration: 3000,
        });
        return false;
      }

      //暂时只支持一次只提交一个库位
      let upperData = {
        wareId: localStorage.getItem("wareId"),
        supplierId: this.supplierId,
        deptId: this.deptId,
        upperList: [
          { boxCode: this.ctCode, cellCode: this.targetWorkCellCode },
        ],
      };
      this.overlay = true;
      wms
        .post({
          url: "/transfer/create/upper",
          data: upperData,
        })
        .then((res) => {
          if (res.status === 200 && res.data.code === 200) {
            //提示提交成功
            this.overlay = false;
            //点击后刷新页面
            window.location.reload();
          } else {
            this.overlay = false;
            alert(res.data.message);
          }

          console.log(res);
        });
    },
    // 扫描容器，查出有无推荐库位信息
    scanGenerateCode() {
      //遮罩
      this.overlay = true;


      //传递到后台，后台给出推荐的库位
      wms
        .get({
          url: "/transfer/upper/recommend",
          data: { boxCode: this.ctCode },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            console.log(JSON.stringify(res.data));
            let recCells = res.data.data;
            console.log(recCells.length);
            for (let index = 0; index < recCells.length; index++) {

              let cellInfo = {};
              cellInfo.id = recCells[index].cellId;
              cellInfo.cellCode = recCells[index].cellCode;
              cellInfo.cellName = recCells[index].cellName;
              cellInfo.boxNum = recCells[index].boxNum;
              this.workCellList.push(cellInfo);
            }

            this.tableData1 = this.workCellList;
            this.ctCode;
            document.getElementById("targetWorkCellCode").focus();
            this.overlay = false;
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
    },
    // 扫描库位编码
    scanCellCode() {
      if (!this.ctCode) {
        window.api.toast({
          msg: "请先扫描容器!",
          location: "middle",
          duration: 3000,
        });
        this.targetWorkCellCode = "";
        return false;
      }
    },
    handleSelect(e) {
      this.targetWorkCellCode = e.item.cellCode;
      console.log(e.item.cellCode);
    },
    handleCellChange(e) {
      console.log(e);
      // let that = this;
      if (e) this.searchCellList(e);
    },
    // 查询库位列表中有没有相同的
    searchCellList(e) {
      let cellInTable;
      this.workCellList.forEach((item, index) => {
        if (item.cellCode === e) {
          cellInTable = index;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>


.footer {
  position: absolute;
  padding-top: 65px;
  width: 100%;
  bottom: 0;
}
</style>

<style lang="sass" scoped>
.scanContainer
  >.row
    margin: 0
    padding: 10px

.shelfRecommended_table
  ::v-deep .v-data-table__mobile-table-row
    margin: 4px 8px
    background-color: #e8e8e8f1
  ::v-deep .v-data-table__mobile-row
    min-height: 28px !important
    // 暂无数据的显示
    ::v-deep .v-data-table__empty-wrapper
      display: flex
      justify-content: center
      align-items: center
      td
        line-height: 48px
  ::v-deep .shelfRecommended_table_header
    font-size: 14px !important

.inputPlaceholder
  ::v-deep.v-text-field__slot
    input::-webkit-input-placeholder
      font-size: 15px
    input::-moz-placeholder
      font-size: 15px
    input:-moz-placeholder
      font-size: 15px
    input:-ms-input-placeholder
      font-size: 15px
.treeview_dept
  height: 120px
  overflow-y: scroll
.shelfRecommended_wrap
  height: 100%
  display: flex
  flex-direction: column
  justify-content: space-between
.shelfRecommended_select
  height: 100%
  max-height: 400px
  .shelfRecommended_select_title
    font-size: 15px
    font-weight: bold
  .v-card
    height: 100%
  // background-color: #fff
  .shelfRecommended_select_content
    flex: 1
    max-height: 300px
    overflow: auto
    border-radius: 8px
    background-color: #f2f3f5
    border: 1px solid #dcdcde
    .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child)
      margin-bottom: 12px
    .v-input--selection-controls
      margin-top: 0
    ::v-deep .v-radio
      display: flex
      align-items: center
      flex-wrap: nowrap
      .v-input--selection-controls__input
        height: 32px
        width: 32px
      .v-icon__svg
        height: 30px
        width: 30px
      .v-label
        font-size: 18px
</style>
